<template>
  <!-- 商品详情 -->
  <div class="app-page product-detail-page">
    <topBarBase :barType="2" />
    <!-- 商品主图 -->
    <div id="productSwiperBox" class="swiper banner-nav">
      <div class="swiper-wrapper">
        <div 
          class="banner-item swiper-slide" 
          v-for="(v, i) in productDetail.img" :key="i"
        >
          <img class="swiper-slide-img" :src="v" />
        </div>
      </div>
      <div class="swiper-btn-list">
        <div 
          class="swiper-btn" 
          :class="{'swiper-btn-select': i === swiperRealIndex}"
          v-for="(v, i) in productDetail.img" :key="i"
        ></div>
      </div>
    </div>
    <div class="product-info-bar">
      <div class="product-name">{{ productDetail.name }}</div>
      <div class="product-explain">{{ productDetail.explain }}</div>
      <div class="product-price">
        <span>￥</span>
        <span class="price">
          {{ productDetail.price }}
        </span>
        <div class="explain">订单满900元可享3期免息</div>
      </div>
      <div class="product-class-nav">
        <div>类型：</div>
        <div class="product-class">{{ productDetail.class }}</div>
      </div>
      <div class="page-label">商品描述：</div>
      <div class="product-deatail">{{ productDetail.deatail }}</div>
    </div>
    <detailBottomBar />
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import TopBarBase from "@/components/appBase/topBarBase.vue"
import DetailBottomBar from "@/components/appBase/productDetail/detailBottomBar.vue"
import {
  get_product_data
} from "@/appModel/product.model.js";
import Swiper from "swiper"
import "swiper/dist/css/swiper.css"

const route = useRoute();
const queryData = route.query;
const productDetail = ref(get_product_data({ id: [ Number(queryData.id) ] })[0]);
const swiperRealIndex = ref(0);

const swiperInit = () => {
  const swiper = new Swiper("#productSwiperBox", {
    loop: true,
    autoplay: { 	//自动播放
      delay: 3000,
      stopOnLastSlide: false,
      disableOnInteraction: false,
      reverseDirection: false,
      waitForTransition: true,
    },
  });
  swiper.on("slideChange", () => {
    console.log("activeIndex  => ", swiper.realIndex);
    swiperRealIndex.value = swiper.realIndex;
  });
};

onMounted(() => {
  swiperInit();
});


</script>
<style lang="scss" scoped>
.product-detail-page {
  color: #000;
  margin: 0 auto;
  max-width: 7.5rem;
  .banner-item {
    width: 7.5rem;
    height: 7.8rem;
    .swiper-slide-img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }
    .swiper-slide-video {
      width: 100%;
      height: 100%;
    }
  }
  .swiper-btn-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 8.2rem;
    .swiper-btn {
      flex: 1;
      height: 0.05rem;
      background: #fff;
      &.swiper-btn-select {
        background: #bda8fd;
      }
    }
  }
  .product-info-bar {
    padding: 0.2rem;
    width: 7.5rem;
    display: flex;
    flex-direction: column;
    .explain {
      margin-top: 0.2rem;
      font-size: 0.2rem;
      color: #767676;
    }
    .product-name {
      font-size: 0.46rem;
      font-weight: bold;
    }
    .product-explain {
      font-size: 0.22rem;
      line-height: 0.5rem;
      color: #767676;
    }
    .product-price {
      margin-top: 0.1rem;
      color: #000;
      font-size: 0.3rem;
      display: flex;
      align-items: center;
      .price {
        margin-right: 0.2rem;
        font-size: 0.46rem;
        font-weight: bolder;
      }
    }
    .product-class-nav {
      margin-top: 0.2rem;
      display: flex;
      align-items: center;
      .product-class {
        padding: 0.06rem 0.26rem;
        background: #bda8fd;
        border: 1px solid #6936ff;
        color: #fff;
        border-radius: 0.15rem;
      }
    }
    .page-label {
      margin: 0.2rem 0 0.1rem;
      font-weight: bolder;
      font-size: 0.26rem;
    }
    .product-deatail {
      font-size: 0.24rem;
      line-height: 0.35rem;
      color: #484848;
    }
  }
}
</style>